<template>
  <div class="cell" @click="lookDetail">
    <div class="avatar">
      <!-- <img src="@/assets/images/avatar.png" alt=""> -->
      <van-image :src="IMAGEURL + info.logo" class="img" round lazy-load v-if="info.logo" :alt="`${$cookies.get('city')}-${info.name}`" />
      <van-image :src="require('@/assets/images/avatar/doctor_circle.png')" class="img" round lazy-load :alt="`${$cookies.get('city')}-${info.name}`" v-else />
    </div>
    <div class="info">
      <div class="title">
        <span class="name">{{ info.name }}</span>
        <span class="sub">{{ info.personalTitle }}</span>
      </div>
      <div class="rate">
        <!-- <van-rate v-model="info.initScore" :size="16" allow-half color="#FF6600" class="van_rate" readonly /> -->
        <li-rate v-model="info.initScore" :size="16" allow-half color="#FF6600" class="van_rate" readonly />
        <span class="star">{{ $fomartRate(info.initScore) }}分</span>
        <span class="num">近期有{{ info.initAppointmentCnt }}人预约</span>
      </div>
      <div class="address">
        <span>{{ info.city }}</span>
        <span class="lili_divider" v-if="info.district"></span>
        <span>{{ info.district }}</span>
        <!-- <span>12.km</span> -->
      </div>
      <div class="tag_list">
        <div class="tag" v-for="(item,index) in getLabels(info.expertProject)" :key="index">{{ item }}</div>
        <!-- <div class="tag">阴性矫正</div>
        <div class="tag">根管治疗</div> -->
      </div>
    </div>
  </div>
</template>
<script>
import { Rate } from "vant";
import config from "@/http/config";
export default {
  name: "Doctor",
  components: {
    [Rate.name]: Rate,
  },
  props: {
    info: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      value: 4,
      IMAGEURL: config.IMAGEURL,
    };
  },
  created() {},
  methods: {
    // 查看详情
    lookDetail() {
      let id = this.info.id;
      this.$router.push({
        path: `/doctor/detail/${id}`,
      });
    },

    // 处理标签
    getLabels(str) {
      let arr = [];
      if (!str) {
        return [];
      }

      let list = str.split(",");
      arr = list;
      return arr;
    },
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>